<!-- AI告警督办-列表页（首页） -->
<template>
  <view class="list-all">
    <Header :title="title" bgColor="#fff"/>
    <search-box ref="searchBOX" placeholder="请输入学校名称" mode="input" :selectColumns="schoolList" keyName="name" @search="searchChange"></search-box>
    <scroll-view :scroll-y="true" class="scroll-height"
                 refresher-enabled="true" :refresher-triggered="triggered"
                 :lower-threshold="50" @scrolltolower="nextPage"
                 :refresher-threshold="80" refresher-background="rgb(244, 244, 244)"
                 @refresherpulling="onPulling" @refresherrefresh="onRefresh"
                 @refresherrestore="onRestore" @refresherabort="onAbort"
                 refresher-default-style="none">
      <view v-if="emptyFlag" class="empty-box">
        <uv-empty mode="data" icon="/static/image/no-data.png" width="200rpx" height="260rpx" text="&nbsp;"></uv-empty>
      </view>
      <view v-else class="option-box">
        <view v-for="(item, index) in dataList" :key="item.schoolId">
          <view class="card-all" @click.stop="handleView(item)">
            <view class="card-all-top">
              <image class="card-all-top-img"
                     :src="imgMinioPath + '/pco/icon13.png'"/>
              <text class="card-all-top-tit">
                {{item.schoolName ? item.schoolName : '--'}}
              </text>
            </view>
            <view class="card-all-bottom">
              <view class="card-all-bottom-item">
                <image class="card-all-bottom-item-img"
                       :src="imgMinioPath + '/pco/icon14.png'"/>
                <view class="card-all-bottom-item-tit">
                  <view class="card-all-bottom-item-tit-name">
                    提级预警数量
                  </view>
                  <view class="card-all-bottom-item-tit-num">
                    {{item.alarmNum ? item.alarmNum : 0}}
                  </view>
                </view>
              </view>
              <view class="card-all-bottom-item">
                <image class="card-all-bottom-item-img"
                       :src="imgMinioPath + '/pco/icon15.png'"/>
                <view class="card-all-bottom-item-tit">
                  <view class="card-all-bottom-item-tit-name">
                    整改数量
                  </view>
                  <view class="card-all-bottom-item-tit-num">
                    {{item.wczqNum ? item.wczqNum : 0}}
                  </view>
                </view>
              </view>
              <view class="card-all-bottom-item">
                <image class="card-all-bottom-item-img"
                       :src="imgMinioPath + '/pco/icon16.png'"/>
                <view class="card-all-bottom-item-tit">
                  <view class="card-all-bottom-item-tit-name">
                    待督办数量
                  </view>
                  <view class="card-all-bottom-item-tit-num">
                    {{item.ddbNum ? item.ddbNum : 0}}
                  </view>
                </view>
              </view>
              <view class="card-all-bottom-item">
                <image class="card-all-bottom-item-img"
                       :src="imgMinioPath + '/pco/icon17.png'"/>
                <view class="card-all-bottom-item-tit">
                  <view class="card-all-bottom-item-tit-name">
                    最新提级预警日期
                  </view>
                  <view class="card-all-bottom-item-tit-num">
                    {{item.warningDate ? dayjs(item.warningDate).format('YYYY-MM-DD') : '--'}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadingType" :content-text="contentText"/>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import api from "@/api/pco/alarm/alarmInfo.js";
  const {proxy} = getCurrentInstance();
  import {ref} from "vue";
  import dayjs from "dayjs";
  import searchBox from "@/packagePcoCheck/components/search-box/index.vue";
  import config from '@/common/config';
  let imgMinioPath = ref(config.IMG_MINIO_PATH);
  let userInfo = ref(uni.getStorageSync('userInfo'));
  let title = ref('告警督办');
  let searchBOX = ref();
  let schoolList = ref([]);
  let emptyFlag = ref(false);
  let freshing = ref(false);
  let triggered = ref(false);
  let loadingType = ref('noMore');
  let contentText = reactive({
    contentdown: "上拉显示更多",
    contentrefresh: "正在加载...",
    contentnomore: "没有更多数据了"
  });
  let dataList = reactive([]);
  let queryForm = reactive({
    pageSize: 10,
    pageNum: 1,
    schoolName: '',
    orgId :userInfo.value.user.orgId
  });
  let total = ref(0);

  /** 搜索数据列表 */
  let searchList = (e) => {
    queryForm.pageNum = 1;
    getListData();
  }

  /** 初始化 */
  let getListData = () => {
    proxy.http.post(api.findAlarmNumPage, queryForm).then(res => {
      if (res.code === 0) {
        total.value = res.data.total;
        if (queryForm.pageNum === 1) {
          dataList.length = 0;
        }
        nextTick(()=>{
          dataList.push(...res.data.records);
          if (dataList.length < total.value) {
            loadingType.value = 'more';
          } else {
            loadingType.value = 'noMore';
          }
          emptyFlag.value = dataList.length <= 0;
        })
      }
    })
  }

  let handleView = (item) => {
    uni.navigateTo({
      url: `/packagePcoCheck/pages/alarmInfo/index?schoolId=${item.schoolId}`
    });
  }

  /** 滚动视图区域 */
  /** 翻页 */
  let nextPage = (e) => {
    if (queryForm.pageNum * queryForm.pageSize < total.value) {
      queryForm.pageNum++;
      getListData()
    }
  }
  /** 下拉 */
  let onPulling = (e) => {
    freshing.value = false;
    setTimeout(() => {
      triggered.value = true;
    }, 1000)
  }
  /** 刷新 */
  let onRefresh = (e) => {
    if (freshing.value) return;
    triggered.value = 'restore';
    setTimeout(() => {
      freshing.value = false;
      triggered.value = false;
    }, 1000)
    //获取数据的函数
    queryForm.pageNum = 1 // 记录数
    getListData()
  }
  let onRestore = (e) => {
    triggered.value = 'restore'; // 需要重置
  }
  let onAbort = (e) => {}
  let popup = ref();
  let loading = ref(false);

  onShow(() => {
    searchList();
  })

  let searchChange = (e) => {
    queryForm.schoolName = e;
    searchList();
  }
</script>

<style scoped lang="scss">
  @import '@/static/css/dailycheck/common.scss';

  .scroll-height {
    background: #f6f6f6;
    height: calc(100vh - 350rpx);
  }
  .card-all {
    width: 94%;
    background: #fff;
    border-radius: 16rpx;
    margin: 0 auto 20rpx;
    &-top {
      display: flex;
      align-items: center;
      width: 100%;
      height: 76rpx;
      line-height: 76rpx;
      border-bottom: 1px solid #EDEDED;
      &-img {
        width: 32rpx;
        height: 30rpx;
        margin: 0 20rpx 0 26rpx;
      }
      &-tit {
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    &-bottom {
      display: flex;
      flex-wrap: wrap;
      &-item {
        width: 50%;
        height: 120rpx;
        display: flex;
        align-items: center;
        &-img {
          width: 46rpx;
          height: 46rpx;
          margin: 0 24rpx 0 30rpx;
        }
        &-tit {
          display: flex;
          justify-content: center;
          /*font-weight: bold;*/
          font-size: 24rpx;
          flex-direction: column;
          &-name {
            color: #2E2E3A;

          }
          &-num {
            color: #1579FA;
            margin-top: 10rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>


